<template>
  <div class="star">
    <div class="left">
      <div class="network">
        <div class="title">
          <div class="name">网点</div>
          <div>
            <SelectMonth @getMonth="getbranchinfo" />
          </div>
        </div>
        <div class="company">
          <div class="name">辽宁盘锦公司</div>
          <div class="rate" @click="starDetail">B</div>
        </div>
        <div class="star-rate">
          <StarRate :value="4" />
        </div>
        <div class="score">
          <div class="rate">
            <Score />
          </div>
          分
          <div class="index">5.1↑</div>
        </div>
        <div class="remark">再提升7.4分可达到五星</div>
        <div class="ranking">
          <div>省区排名：<span>前40%</span></div>
          <div>全网排名：<span>前40%</span></div>
        </div>
      </div>
      <div class="detail">
        <div class="title">诊断明细</div>
        <el-table :data="tableData" border height="496px">
          <el-table-column label="类型" prop="type" width="60" />
          <el-table-column label="指标" prop="target" width="110">
            <template slot-scope="scope">
              <div
                v-if="scope.row.show"
                class="target"
                @click="targetDetail(scope.row)"
              >
                {{ scope.row.target }}
              </div>
              <div v-else>{{ scope.row.target }}</div>
            </template>
          </el-table-column>
          <el-table-column label="完成值" prop="complete" width="110" />
          <el-table-column label="得分" prop="score" width="85" />
          <el-table-column label="近半年得分趋势" prop="img" />
        </el-table>
      </div>
    </div>
    <div class="center">
      <div class="pk">
        <Bar />
      </div>
      <div class="center-bottom">
        <div class="station">
          <div class="title">
            <div class="name">站柜五星</div>
            <div>
              <SelectMonth ref-name="1" @getMonth="getDate" />
            </div>
          </div>
          <div class="charts">
            <Doughnut :option-data="starData[1]" />
          </div>
        </div>
        <div class="salesman">
          <div class="title">
            <div class="name">业务员五星</div>
            <div>
              <SelectMonth ref-name="2" @getMonth="getDate" />
            </div>
          </div>
          <div class="charts">
            <Doughnut :option-data="starData[2]" />
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="contract">
        <div class="title">
          <div class="name">承包区五星</div>
          <div>
            <SelectMonth ref-name="0" @getMonth="getDate" />
          </div>
        </div>
        <div class="charts">
          <Doughnut :option-data="starData[0]" />
        </div>
      </div>
      <div class="service">
        <div class="title">
          <div class="name">客服五星</div>
          <div>
            <SelectMonth ref-name="3" @getMonth="getDate" />
          </div>
        </div>
        <div class="charts">
          <Doughnut :option-data="starData[3]" />
        </div>
      </div>
    </div>
    <div v-if="mask" class="mask">
      <div v-if="targetMask" class="target-mask">
        <div class="el-icon-close" @click="closeTarget" />
        <div class="title">提分攻略</div>
        <div class="flex">
          <div class="name">进港投诉率</div>
          <div class="detail" @click="detail">
            查看详情<span class="el-icon-arrow-right" />
          </div>
        </div>
        <div class="content">
          <div class="item">
            <div class="caption">
              <div class="icon" />
              <div class="text">失分原因</div>
            </div>
            <div class="explain">
              当前周期的进港投诉率为<span class="red">万7.62</span>，万2<<span
                class="red"
                >万7.62</span
              >≤<span class="b">万8</span>得<span class="b">14</span
              >分，因此扣<span class="red">6.0</span>分
            </div>
          </div>
          <div class="item">
            <div class="caption">
              <div class="icon" />
              <div class="text">问题诊断</div>
            </div>
            <div class="explain">
              辽宁盘锦辽东湾营业部、辽宁盘锦兴隆台营业部、辽宁盘锦迎宾营业部等3个承包区的进港投诉量大，客服冬等1个业务员的进港投诉量大
            </div>
          </div>
          <div class="item">
            <div class="caption">
              <div class="icon" />
              <div class="text">问题诊断</div>
            </div>
            <div class="explain">
              当前周期的进港投诉率控制在≤<span class="b">万2</span>可提分<span
                class="red"
                >6.0</span
              >
            </div>
          </div>
        </div>
      </div>
      <div v-if="starMask" class="star-mask">
        <div class="el-icon-close" @click="closeStar" />
        <div class="title">指标说明</div>
        <div class="item">
          <div class="caption">
            <div class="icon" />
            <div class="text">星级评定标准</div>
          </div>
          <div class="flex">
            <div class="grade">
              <div class="name">1星</div>
              <div class="score">0~50</div>
            </div>
            <div class="symbol">></div>
            <div class="grade">
              <div class="name">2星</div>
              <div class="score">50~60</div>
            </div>
            <div class="symbol">></div>
            <div class="grade">
              <div class="name">3星</div>
              <div class="score">60~80</div>
            </div>
            <div class="symbol">></div>
            <div class="grade">
              <div class="name">4星</div>
              <div class="score">80~90</div>
            </div>
            <div class="symbol">></div>
            <div class="grade">
              <div class="name">5星</div>
              <div class="score">90~100</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="caption">
            <div class="icon" />
            <div class="text">网点层级分类标准（当月日均有偿派件量）T-3</div>
          </div>
          <div class="flex">
            <div class="grade">
              <div class="name">A</div>
              <div class="score">5w~∞</div>
            </div>
            <div class="symbol"><</div>
            <div class="grade">
              <div class="name">B</div>
              <div class="score">1w~5w</div>
            </div>
            <div class="symbol"><</div>
            <div class="grade">
              <div class="name">C</div>
              <div class="score">1w~5w</div>
            </div>
            <div class="symbol"><</div>
            <div class="grade">
              <div class="name">D</div>
              <div class="score">1w~5w</div>
            </div>
            <div class="symbol"><</div>
            <div class="grade">
              <div class="name">E</div>
              <div class="score">1w~5w</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="caption">
            <div class="icon" />
            <div class="text">指标＆权重＆评分标准</div>
          </div>
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="业务量达成（T-3）" name="1">
              <div>权重&nbsp;&nbsp;&nbsp;20%</div>
              <div>计算公式&nbsp;&nbsp;&nbsp;业务量完成值/业务量目标值</div>
              <div>
                评分标准&nbsp;&nbsp;&nbsp;满分20分，业务量完成比得分=业务量完成比*20
              </div>
            </el-collapse-item>
            <el-collapse-item title="进港投诉率（T-3）" name="2">
              <div>权重&nbsp;&nbsp;&nbsp;20%</div>
              <div>计算公式&nbsp;&nbsp;&nbsp;业务量完成值/业务量目标值</div>
              <div>
                评分标准&nbsp;&nbsp;&nbsp;满分20分，业务量完成比得分=业务量完成比*20
              </div>
            </el-collapse-item>
            <el-collapse-item title="业务量达成（T-3）" name="3">
              <div>权重&nbsp;&nbsp;&nbsp;20%</div>
              <div>计算公式&nbsp;&nbsp;&nbsp;业务量完成值/业务量目标值</div>
              <div>
                评分标准&nbsp;&nbsp;&nbsp;满分20分，业务量完成比得分=业务量完成比*20
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div v-if="detailMask" class="detail-mask">
        <div class="el-icon-close" @click="closeDetail" />
        <div class="title">进港投诉率</div>
        <div class="date flex">
          <SelectMonthLight type="date" />
          <SelectMonthLight width="100px" />
        </div>
        <div class="item">
          <div class="caption">
            <div class="icon" />
            <div class="text">指标详情</div>
          </div>
          <div class="explain flex">
            <div>遗失率<span>7.53%</span></div>
            <div>目标值<span>--</span></div>
            <div>进港投诉量<span>--</span></div>
          </div>
        </div>
        <div class="item">
          <div class="caption">
            <div class="icon" />
            <div class="text">业务员</div>
          </div>
          <div class="table">
            <el-table height="260" border>
              <el-table-column label="业务员名称" align="center" />
              <el-table-column label="进港投诉率" align="center" />
              <el-table-column label="进港投诉量" align="center" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStar, barnchinfoApi } from "@/api/star";
import { getDateYM } from "@/utils/index";

export default {
  name: "Star",
  components: {},
  data() {
    return {
      mask: false,
      targetMask: false,
      starMask: false,
      detailMask: false,
      activeName: "1",
      tableData: [
        {
          type: "售后",
          target: "进港投诉率",
          complete: "万 6.91",
          score: "14.0/20",
          img: null,
          show: true,
        },
        {
          type: "质量",
          target: "虚签率",
          complete: "万 2.54",
          score: "16.0/20",
          img: null,
          show: true,
        },
        {
          type: "质量",
          target: "遗失率",
          complete: "百万 73.77",
          score: "7.0/10",
          img: null,
          show: true,
        },
        {
          type: "质量",
          target: "破损率",
          complete: "百万 18.02",
          score: "7.0/10",
          img: null,
          show: true,
        },
        {
          type: "业务",
          target: "业务量达成",
          complete: "95.18%",
          score: "19.0/20",
          img: null,
          show: true,
        },
        {
          type: "售后",
          target: "工单及时解决率",
          complete: "95.17%",
          score: "9.0/10",
          img: null,
          show: true,
        },
        {
          type: "质量",
          target: "频率签收",
          complete: "--",
          score: "10.0/10",
          img: null,
          show: false,
        },
        {
          type: "扣减",
          target: "交货滞留率",
          complete: "1.04%",
          score: "0.0",
          img: null,
          show: false,
        },
        {
          type: "扣减",
          target: "行政处罚",
          complete: "--",
          score: "0.0",
          img: null,
          show: false,
        },
      ],
      starData: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      for (let i = 0; i < 4; i++) {
        const res = await this.getStarData(i, getDateYM());
        this.starData.push(res);
      }
      const info = await barnchinfoApi(getDateYM());
      console.log("网点信息", info);
    },
    async getStarData(type, date) {
      const res = await getStar({ type, date });
      return res.data;
    },
    async getDate(obj) {
      console.log(obj);
      const res = await this.getStarData(obj.ref, obj.date);
      this.starData[obj.ref] = res;
      this.$set(this.starData, obj.ref, res);
    },
    // 获取网点信息
    async getbranchinfo(obj) {
      const res = await barnchinfoApi(obj.date);
      console.log("网点信息", res);
    },
    targetDetail(row) {
      this.mask = true;
      this.targetMask = true;
    },
    starDetail() {
      this.mask = true;
      this.starMask = true;
    },
    detail() {
      this.targetMask = false;
      this.detailMask = true;
    },
    closeTarget() {
      this.mask = false;
      this.targetMask = false;
    },
    closeStar() {
      this.mask = false;
      this.starMask = false;
    },
    closeDetail() {
      this.detailMask = false;
      this.targetMask = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.star {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 30px 10px 30px 30px;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;

  & > div > div {
    background: #ffffff;
    box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
    border-radius: 8px;
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
  }

  .charts {
    margin-top: 30px;
    height: 380px;
  }

  .left {
    width: 558px;

    .network {
      padding: 24px;
      height: 288px;

      .company {
        margin-top: 16px;
        display: flex;
        font-size: 24px;
        color: #2087d0;

        .rate {
          margin-left: 10px;
          width: 28px;
          height: 28px;
          text-align: center;
          background: rgba($color: #e7f3fb, $alpha: 0.5);
          border-radius: 2px;
          border: 1px solid #2087d0;
          cursor: pointer;
        }
      }

      .star-rate {
        margin-top: 12px;

        .el-rate {
          &::v-deep .el-rate__icon {
            font-size: 22px !important;
          }
        }
      }

      .score {
        margin-top: 16px;
        display: flex;
        align-items: flex-end;

        .rate {
          width: 85%;

          &::v-deep .el-progress-bar {
            width: 103%;
          }

          &::v-deep .el-progress__text {
            font-size: 24px !important;
            color: #333;
          }
        }

        .index {
          margin-left: 12px;
          font-size: 18px;
          color: #2087d0;
        }
      }

      .remark {
        font-size: 14px;
        color: #666666;
      }

      .ranking {
        margin-top: 20px;
        font-size: 18px;

        & div + div {
          margin-top: 16px;
        }

        span {
          color: #2087d0;
        }
      }
    }

    .detail {
      padding: 24px;
      margin-top: 20px;
      height: 586px;

      .el-table {
        margin-top: 20px;

        &::v-deep .cell {
          padding-left: 4px;
          padding-right: 0;
        }

        &::before {
          height: 0;
        }

        &::v-deep .el-table__header tr th {
          border-bottom: none;
          font-weight: 400;
          font-size: 20px;
          color: #333;
        }

        &::v-deep .el-table__body tr td {
          border-bottom: none;
          font-size: 18px;
          color: #666666;
        }

        .target {
          color: #2087d0;
          cursor: pointer;
        }
      }
    }
  }

  .center {
    width: 848px;

    .pk {
      height: 436px;
    }

    .center-bottom {
      margin-top: 20px;
      height: 437px;
      display: flex;
      justify-content: space-between;
      background-color: #f5f5f5;
      box-shadow: none;

      & > div {
        padding: 24px;
        width: 414px;
        background-color: #fff;
        box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
        border-radius: 8px;
      }
    }
  }

  .right {
    width: 414px;

    & > div {
      height: 437px;
      padding: 24px;
    }

    .service {
      margin-top: 20px;
    }
  }

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000, $alpha: 0.3);

    .el-icon-close {
      position: absolute;
      top: 28px;
      right: 24px;
      font-size: 20px;
      cursor: pointer;
    }

    .title {
      justify-content: center;
    }

    .caption {
      display: flex;
      align-items: center;

      .icon {
        margin-right: 8px;
        width: 4px;
        height: 20px;
        background: #2087d0;
        border-radius: 2px;
      }

      .text {
        font-weight: 400;
        font-size: 18px;
      }
    }

    .target-mask {
      position: absolute;
      top: calc(50% - 235px);
      left: calc(50% - 317px);
      padding: 24px;
      width: 634px;
      height: 470px;
      background: #ffffff;
      box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
      border-radius: 8px;

      & > .flex {
        margin-top: 24px;

        .name {
          font-size: 20px;
        }

        .detail {
          color: #666;
          cursor: pointer;

          span {
            margin-left: 6px;
          }

          &:hover {
            color: #2087d0;
          }
        }
      }

      .content {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #dedfe2;

        .item {
          .explain {
            margin-top: 16px;
            padding: 12px 18px;
            width: 586px;
            line-height: 24px;
            background: #fafafa;
            border-radius: 4px;
            color: #666;

            .red {
              color: #f45959;
            }

            .b {
              color: #333;
            }
          }
        }

        .item + .item {
          margin-top: 20px;
        }
      }
    }

    .star-mask {
      position: absolute;
      top: calc(50% - 313px);
      left: calc(50% - 341px);
      padding: 24px;
      width: 682px;
      height: 626px;
      background: #ffffff;
      box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
      border-radius: 8px;

      .item {
        margin-top: 24px;
        .flex {
          margin-top: 16px;
          justify-content: center;

          .grade {
            padding: 16px 0;
            width: 86px;
            height: 74px;
            border: 1px solid #ebecee;
            border-radius: 4px;
            text-align: center;
            background: #fafafa;

            .score {
              margin-top: 6px;
              color: #2087d0;
            }
          }

          .symbol {
            width: 42px;
            height: 74px;
            line-height: 74px;
            text-align: center;
          }
        }
        .el-collapse {
          border: none;
          &::v-deep .el-collapse-item__header {
            font-size: 18px;
            color: #333;
          }
        }
      }
    }

    .detail-mask {
      position: absolute;
      top: calc(50% - 295px);
      left: calc(50% - 280px);
      padding: 24px;
      width: 560px;
      height: 590px;
      background: #ffffff;
      box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
      border-radius: 8px;
      .date {
        margin: 24px 0;
        justify-content: flex-start;
        .el-date-editor + .el-date-editor {
          margin-left: 16px;
        }
      }
      .item {
        .explain {
          margin-top: 16px;
          padding: 16px;
          width: 508px;
          height: 80px;
          background: #fafafa;
          border-radius: 4px;
          flex-wrap: wrap;
          div {
            width: 230px;
            line-height: 24px;
            font-size: 16px;
            color: #666;
            span {
              margin-left: 12px;
            }
          }
        }
        .table {
          margin-top: 16px;
          width: 488px;
          height: 260px;
          .el-table {
            border-radius: 4px;
            border: 1px solid #ebecee;
            &::v-deep .el-table__header tr th {
              background: #f5f5f5;
              font-size: 16px;
              color: #666;
            }
          }
        }
      }
      .item + .item {
        margin-top: 22px;
      }
    }
  }
}
</style>
